<template>
	<div>
		<div class="home-page">
			<div class="banner">
				<div class="container">
					<h1 class="logo-font">conduit</h1>
					<p>A place to share your knowledge.</p>
				</div>
			</div>

			<div class="container page">
				<div class="row">
					<div class="col-md-9">
						<div class="feed-toggle">
							<ul class="nav nav-pills outline-active">
								<li v-if="user" class="nav-item">
									<nuxt-link class="nav-link disabled" 
                                    exact
                                    :class="{
                                        active: tab == 'your_feed'
                                        }" 
                                    :to="{
                                        query:{
                                            tab:'your_feed'
                                        }
                                    }">Your Feed</nuxt-link>
								</li>
								<li class="nav-item">
									<nuxt-link class="nav-link disabled" 
                                    exact
                                    :class="{
                                        active: tab == 'global_feed'
                                        }" 
                                    :to="{
                                        query:{
                                            tab:'global_feed'
                                        }
                                    }">Global Feed</nuxt-link>
								</li>
                                <li class="nav-item" v-if="tag">
									<nuxt-link class="nav-link disabled" 
                                    exact
                                    :class="{
                                        active: tab == 'tag'
                                        }" 
                                    :to="{
                                        query:{
                                            tab:'tag',
                                            tag:tag
                                        }
                                    }">{{tag}}</nuxt-link>
								</li>
							</ul>
						</div>

						<div class="article-preview" v-for="item in articles" :key="item.slug">
							<div class="article-meta">
								<nuxt-link :to="{
                                    name:'profile',
                                    params:{
                                        username:item.author.username
                                    }
                                }">
									<img :src="item.author.image" />
								</nuxt-link>
								<div class="info">
									<nuxt-link :to="{
                                        name:'profile',
                                        params:{
                                            username:item.author.username
                                        }}" class="author">{{item.author.username}}</nuxt-link>
                                    <span class="date">{{item.createdAt | date('MMMM D, YYYY') }}</span>
								</div>
								<button @click="onFavorite(item)" class="btn btn-outline-primary btn-sm pull-xs-right"
                                :class="{
                                    active:item.favorited
                                }"
                                :disabled="item.favoriteDisabled">
									<i class="ion-heart"></i>
									{{item.favoritesCount}}
								</button>
							</div>
							<nuxt-link :to="{
                                name:'article',
                                params:{
                                    slug:item.slug
                                }
                            }" class="preview-link">
								<h1>{{item.title}}</h1>
								<p>{{item.description}}</p>
								<span>Read more...</span>
							</nuxt-link>
						</div>
					</div>

					<div class="col-md-3">
						<div class="sidebar">
							<p>Popular Tags</p>

							<div class="tag-list">
                                    <nuxt-link v-for="item in tagsData" :key="item"  :to="{
                                        name:'home',
                                        query:{
                                            tag:item,
                                            tab:'tag'
                                        }
                                    }" class="tag-pill tag-default">
                                    {{item}}
                                    </nuxt-link>
								
							</div>
						</div>
					</div>
					<!-- 分页列表 -->
					<nav>
						<ul class="pagination">
							<li v-for="(item,index) in totalPage" :key="index"
								class="page-item"
                                :class="{active: item == page}">
								<nuxt-link class="page-link" :to="{
                                    query:{
                                        page:item,
                                        tag:$route.query.tag,
                                        tab:tab
                                    }}">{{item}}</nuxt-link>
							</li>
						</ul>
					</nav>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { 
    getArticle,
    getFeedArticle,
    addFavorite,
    deleteFavorite
    } from "@/api/article";
import { getTags } from "@/api/tags";
import {mapState} from 'vuex'
export default {
	name: "home",
	async asyncData({ query,store }) {
        // 分页
		const page = Number.parseInt(query.page || 1);
        const limit = 20;
        const {tag} = query
        const {tab} = query || 'global_feed'
        const loadArticle = store.state.user && tab=='your_feed' ?getFeedArticle:getArticle
        const [article,tags] = await Promise.all([
            loadArticle({
			limit,
            offset: (page - 1) * limit,
            tag,
        }),
        getTags()
        ])
         const { articles,articlesCount} =  article.data
         const tagsData = tags.data.tags
         articles.forEach(article => article.favoriteDisabled = false)
		return {
			articles,
            articlesCount,
            limit,
            page,
            tagsData,
            tag,
            tab
		};
    },
    watchQuery:['page','tag','tab'],
    computed:{
        ...mapState(['user']),
        totalPage(){
            return Math.ceil(this.articlesCount/this.limit)
        }
    },
    methods:{
       async onFavorite(article){
           article.favoriteDisabled = true
           
           //添加点赞
           if(!article.favorited){
                await addFavorite(article.slug)
                article.favorited = true
                article.favoritesCount += 1
                
           }else{
                //取消点赞
                await deleteFavorite(article.slug)
                article.favorited = false
                article.favoritesCount += -1
           }
           article.favoriteDisabled = false
           
       }
    }
};
</script>

<style>
</style>